import { List } from 'immutable'
import React from 'react'
import { connect } from 'react-redux'
// import { match} from 'react-router-dom'
import { push, replace } from 'react-router-redux'
import { Dispatch } from 'redux'
import { StageConfig, State } from '../types'
import { BLOCK_SIZE as B, PLAYER_CONFIGS } from '../utils/constants'
import Screen from './Screen'
import StagePreview from './StagePreview'
import Text from './Text'
import TextButton from './TextButton'
import { useNavigate,useLocation, useParams} from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
function ChooseStageScene(props){
  let params=useParams();
  let navigate=useNavigate();
  const location=useLocation();
  const dispatch = useDispatch();
  var stages = useSelector((state) => {
      console.log(state);
      return state.stages;});
//   stages: List<StageConfig>
//   dispatch: Dispatch
//   location: Location
//   match: match<{ stageName: string }>
// }> {
  const onKeyDown = (event: KeyboardEvent) => {
    const config = PLAYER_CONFIGS.player1
    if (event.code === config.control.left) {
      onChoosePrevStage()
    } else if (event.code === config.control.right) {
      onChooseNextStage()
    } else if (event.code === config.control.fire) {
      onStartPlay()
    }
  }

  React.useEffect(()=>{
    document.addEventListener('keydown', onKeyDown)
    return()=>{
      document.removeEventListener('keydown', onKeyDown)  
    }
  },[])
  // componentDidMount() {
  //   document.addEventListener('keydown', onKeyDown)
  // }

  // componentWillUnmount() {
  //   document.removeEventListener('keydown', onKeyDown)
  // }


  const getCurrentStageIndex = () => {
    // const { stages } = props
    const { stageName } = params
    const stageIndex = stages.findIndex(s => s.name === stageName)
    DEV.ASSERT && console.assert(stageIndex !== -1)
    return stageIndex
  }

  const onChoose = (stageName: string) => {
    // const {location } = props
    // dispatch(replace(`/choose/${stageName}${location.search}`))
    console.log(stageName);
    navigate(`/choose/${stageName}${location.search}`)
  }

  const onChoosePrevStage = () => {
    // const { stages } = props
    const stageIndex = getCurrentStageIndex()
    if (stageIndex > 0) {
      onChoose(stages[stageIndex - 1].name)
    }
  }

  const onChooseNextStage = () => {
    // const { stages } = props
    const stageIndex = getCurrentStageIndex()
    console.log(stages);
    console.log(stageIndex,stages.size);
    if (stageIndex < stages.length - 1) {
      // console.log(stages.get(stageIndex+1));
      onChoose(stages[stageIndex + 1].name)
    }
  }

  const onStartPlay = () => {
    // const { dispatch, location } = props
    // const { stageName } = params
    // const location=useLocation();
    // dispatch(push(`/stage/${stageName}${location.search}`))
    navigate(`/stage/${stageName}${location.search}`)
  }

  // render() {
    console.log("ChooseStageScene=====");
    console.log(props);
    
    // const {  dispatch, stages } = props
    const stageNames = stages.map(s => s.name)
    const { stageName } = params
    if (!stageNames.includes(stageName)) {
      return <Redirect to={`${match.url}/${stageNames.first()}`} />
    }
    const index = stageNames.indexOf(stageName)
    return (
      <Screen background="#333">
        <Text content="choose stage:" x={0.5 * B} y={0.5 * B} />
        <StagePreview
          key={index - 1}
          stage={index === 0 ? null : stages[index - 1]}
          x={0.75 * B}
          y={4.375 * B}
          scale={1 / 4}
        />
        <StagePreview
          key={index}
          stage={stages[index]}
          x={4.75 * B}
          y={2.75 * B}
          scale={1 / 2}
        />
        <StagePreview
          key={index + 1}
          stage={stages[index + 1]}
          x={12 * B}
          y={4.375 * B}
          scale={1 / 4}
        />
        <Text content={`stage ${stageName}`} x={6.5 * B} y={9.75 * B} />
        <g className="button-areas" transform={`translate(${2.5 * B}, ${12 * B})`}>
          <TextButton
            content="prev"
            disabled={index === 0}
            x={0}
            y={0}
            onClick={onChoosePrevStage}
          />
          <TextButton
            content="next"
            disabled={index === stageNames.size - 1}
            x={3 * B}
            y={0}
            onClick={onChooseNextStage}
          />
          <TextButton content="play" stroke="#96d332" x={6 * B} y={0} onClick={onStartPlay} />
          <TextButton content="back" x={9 * B} y={0} onClick={() => navigate('/')} />
        </g>
        <g className="hint" transform={`translate(${0.5 * B},${14.5 * B}) scale(0.5)`}>
          <Text fill="#999" content="Press left or right to choose stages. Press fire to start." />
        </g>
      </Screen>
    )
  }

// const mapStateToProps = (state: State) => ({ stages: state.stages })

export default ChooseStageScene
